<template>
  <div>
    <div v-for="(o, index) in 8" :key="o" class="top6" @click="jump(index)">
      <div style="height: 100%; width: 50%">
        <el-image style="width: 100%; height: 100%" :src="imgs[index]"> </el-image>
      </div>
      <div style="margin-top: 1%; height: 100%; width: 100%">
        <span
          style="
            display: flex;
            font-size: smaller;
            font-weight: bold;
            color: black;
            margin-left: 1%;
            margin-top: 1%;
          "
          >电影名: {{ name[index] }}</span
        >
        <span
          style="
            display: flex;
            font-size: smaller;
            font-weight: bold;
            color: black;
            margin-left: 1%;
            margin-top: 1%;
          "
          >导演: {{ director[index] }}</span
        >
        <span
          style="
            display: flex;
            font-size: smaller;
            font-weight: bold;
            color: black;
            margin-left: 1%;
            margin-top: 1%;
          "
          >主演: {{ mrole[index] }}</span
        >
        <span
          style="
            display: flex;
            font-size: smaller;
            font-weight: bold;
            color: black;
            margin-left: 1%;
            margin-top: 1%;
          "
          >语言:
          <el-tag type="primary" style="margin-left: 1%">{{ mlanguage[index] }}</el-tag></span
        >
        <span
          style="
            display: flex;
            font-size: smaller;
            font-weight: bold;
            color: black;
            margin-left: 1%;
            margin-top: 1%;
          "
          >电影类型: {{ mtype[index] }}</span
        >
      </div>
      <div style="display: flex; float: right; width: 35%; height: 20%">
        <span
          style="
            display: inline-block;
            font-size: smaller;
            font-weight: bold;
            color: orangered;
            margin-left: 2%;
            margin-top: 80%;
          "
          >推荐指数</span
        >
      </div>
      <div style="width: 19%; height: 40%; margin-right: 5%; margin-top: 10%">
        <span
          style="
            display: flex;
            font-size: 30px;
            font-weight: bold;
            color: black;
            margin-top: 1%;
            color: yellow;
          "
          >{{ score[index] }}</span
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router';
const score = ref([]);
const name = ref([]);
const imgs = ref([]);
const director = ref([]);
const mrole = ref([]);
const mlanguage = ref([]);
const mtype = ref([]);
onMounted(() => {
  imgs.value = [
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
    require('@/assets/rsds.jpg'),
  ];
  name.value = [
    '人生大事',
    '人生大事',
    '人生大事',
    '人生大事',
    '人生大事',
    '人生大事',
    '人生大事',
    '人生大事',
  ];
  director.value = ['刘江江', '刘江江', '刘江江', '刘江江', '刘江江', '刘江江', '刘江江', '刘江江'];
  mrole.value = [
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
    '朱一龙/杨恩又',
  ];
  mlanguage.value = ['国语', '国语', '国语', '国语', '国语', '国语', '国语', '国语'];
  mtype.value = [
    '剧情 家庭',
    '剧情 家庭',
    '剧情 家庭',
    '剧情 家庭',
    '剧情 家庭',
    '剧情 家庭',
    '剧情 家庭',
    '剧情 家庭',
  ];
  score.value = [26, 26, 26, 26, 26, 26, 26, 26];
});
const jump = index => {
  sessionStorage.setItem('movieInfo', JSON.stringify(name.value[index]));
  router.push('/movieInfo');
};
</script>
<style lang="scss" scoped>
.top6 {
  width: 100%;
  height: 120px;
  display: flex;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background-color: burlywood;
}
</style>
